<template>
  <el-button type="primary" :icon="Fold" size="small" @click="foldpush" />

  <el-menu 
  active-text-color="#E1913C" 
  background-color="333744" 
  class="el-menu-vertical-demo"
  default-active="dept" 
  :default-openeds="['group1']" 
  text-color="rgb(253, 253, 255)" 
  @open="handleOpen"
  @close="handleClose" 
  router 
  :collapse="isCollapsed"
  >
    <el-sub-menu index="group1" class="sub_menu">
      <template #title>
        <el-icon>
          <Setting />
        </el-icon>
        <span>后台管理</span>
      </template>
      <!-- index中的字符是跳转的路径 -->
      <el-menu-item index="deptView"><el-icon><Menu /></el-icon>科室管理</el-menu-item>
      <el-menu-item index="docView"><el-icon><Menu /></el-icon>医生管理</el-menu-item>
      <el-menu-item index="drugView"><el-icon><Menu /></el-icon>药物管理</el-menu-item>
      <el-menu-item index="levelView"><el-icon><Menu /></el-icon>号别管理</el-menu-item>
      <el-menu-item index="prescriptionView"><el-icon><Menu /></el-icon>处方管理</el-menu-item>
      <el-menu-item index="regView"><el-icon><Menu /></el-icon>挂号员信息管理</el-menu-item>
      <el-menu-item index="schView"><el-icon><Menu /></el-icon>排班管理</el-menu-item>





    </el-sub-menu>

  </el-menu>
</template>
  
<script  setup>
import {
  Fold,
  Setting,
  Menu,
} from '@element-plus/icons-vue'
import { ref } from "vue"


const isCollapsed = ref(false);

const emits = defineEmits(['foldchange'])
const foldpush = () => {
  isCollapsed.value = !isCollapsed.value;
  console.log("子组件提交了");
  emits('foldchange', isCollapsed.value);
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
  
<style lang="scss" scoped>
.el-button {
  width: 100%;
}

.el-menu {
  border-right: 0px solid;
}
.sub_menu{
  el-icon{
    color: white;
    background-color: rgb(216, 125, 40);
  }
}
</style>